import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import { good_fav, good_favlist, shopcart_add } from '../../utils/api';
import { Toast, Ellipsis } from "antd-mobile";

import { connect } from 'react-redux';

import {
    request_collect_action,
    request_cancel_collect_action,
    request_add_shopcart_action
} from '../../store/actionCreator'

class Operate extends Component {

    iscollect(goodinfo) { //判断当前详情页的商品是否已收藏
        //拿到store中的收藏列表,判断当前详情页的商品是否在收藏列表中
        var index = this.props.collectlist.findIndex((item) => {
            return item.id == goodinfo.id;
        })
        return index != -1;
    }
    collect(goodinfo) { //执行收藏 或 取消收藏
        if (this.iscollect(goodinfo)) { //已收藏
            this.props.do_cancel_collect(goodinfo)
        } else { //未收藏
            this.props.do_collect(goodinfo)
        }
    }

    // 加入购物车
    addshopcart(goodinfo) {
        this.props.do_add_shopcart(goodinfo)

    }
    render() {
        var { goodinfo } = this.props;
        return (
            goodinfo && goodinfo.salesPrice && goodinfo.activityTags &&
            <div className='operate'>
                <div className="line_1">
                    <div className="price">活动价￥<span>{goodinfo.salesPrice.value}</span></div>
                    <div className="sales">{goodinfo.salesPrice.name}</div>
                </div>
                <div className="tags">
                    {
                        goodinfo.activityTags && goodinfo.activityTags.map((item, index) => {
                            return (<span key={index}>{item}</span>)
                        })
                    }
                </div>
                <Ellipsis className="goodname" direction='end' rows={2} content={goodinfo.name} />
                <div className="opers">
                    <div className="oper" onClick={() => { this.collect(goodinfo) }}>
                        <i className={'iconfont icon-shoucang ' + (this.iscollect(goodinfo) ? 'active' : '')}></i>
                        <span>{this.iscollect(goodinfo) ? '已收藏' : '收藏'}</span>
                    </div>
                    <div className="oper">
                        <i className='iconfont icon-fenxiang'></i>
                        <span>分享</span>
                    </div>
                    <div className="oper" onClick={() => { this.props.history.push('/collect') }}>
                        <i className='iconfont icon-gouwuche'></i>
                        <span>购物车</span>
                    </div>
                    <div className="cart">
                        <div className='shopcart' onClick={() => { this.addshopcart(goodinfo) }}>加入购物车</div>
                        <div className='pay'>立即购买</div>
                    </div>
                </div>
            </div>
        );
    }
}

export default connect(
    (state)=>{ //将store中的数据注入到组件属性中(props)
        return {
            collectlist: state.collectlist
        }
    },
    (dispatch)=>{ //将dispatch以方法的形式 注入到组件属性中(props)
        return {
            do_collect(params){
                dispatch( request_collect_action(params) )
            },
            do_cancel_collect(params){
                dispatch( request_cancel_collect_action(params) )
            },
            do_add_shopcart(params){
                dispatch( request_add_shopcart_action(params) )
            }
        }
    }
)( Operate );